import React from 'react'
import "./index.css"
//nanoid包会自动生成唯一的值
import { nanoid} from "nanoid"

//通过props把父组件设置状态的方法传过来,使子元素代替父元素给状态添加新的内容
//也可以直接在父组件中声明一个回调函数,通过传参来接收新的值,并在父元素中给状态设置新的值
export default function Header({ setTodoList, todoList }) {

  //发布事件函数
  const publishHandle = (e)=>{
    //判断是否点击的是回车
    //通过事件对象中的键码可以判断,回车的键码是13
    if(e.keyCode !==13 ) return
    //判空
    //获取输入框中的值
    const publishValue = e.target.value.trim()
    if(!publishValue) return alert("请输入正确的内容")

    const newTodo = {id: nanoid(), todo: publishValue, done: false}
    //子组件调用父组件的方法,设置新的state覆盖就的state
    setTodoList([newTodo,...todoList])

    //设置完成后,让输入款清空
    e.target.value = ""
  }



  return (
    <div className="todo-header">
        <input type="text" onKeyUp={publishHandle} placeholder="请输入你的任务名称，按回车键确认"/>
    </div>
  )
}
